<template>
  <Header />
  <div class="add-tour-container">
    <el-card class="form-card">
      <h2 class="form-title">添加旅游景点</h2>
      <el-form>
        <el-form-item label="标题">
          <el-input placeholder="请输入您要添加的" v-model="tour.title" />
        </el-form-item>

        <el-form-item label="平时图片上传">
        <input type="file" @change="handleFileUpload($event,1)" />
        <img v-if="imageUrl" :src="imageUrl" alt="Preview" />

        </el-form-item>

        <el-form-item label="具体内容">
          <el-input
            type="textarea"
            v-model="tour.description"
            placeholder="请输入具体内容"
            maxlength="500"
            show-word-limit
            rows="4"
          />
        </el-form-item>

        <!-- 这里是选择城市 -->
        <div class="m-4">
          <p>请选择对应的城市</p>
          <el-cascader v-model="value" :options="city_options" @change="handleChange" />
        </div>

        <el-form-item label="最佳月份">
          <el-select
            v-model="month"
            clearable
            placeholder="Select"
            style="width: 240px"
          >
            <el-option
              v-for="item in month_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="最佳月份图片">
           <input type="file" @change="handleFileUpload($event,2)" />
        <img v-if="baseImageUrl" :src="baseImageUrl" alt="Preview" />
        </el-form-item>

        <el-form-item label="最佳月份的具体内容">
          <el-input
            type="textarea"
            v-model="tour.bestMonthDescription"
            placeholder="请输入最佳月份的具体内容"
            maxlength="500"
            show-word-limit
            rows="4"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="success" @click="submitTour">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
  <Footer />
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue'
import { CityList,City } from '@/api'

// 城市选择
const value = ref([])
var city_options = ref([]);

const props = {
  expandTrigger: 'hover' as const,
}

const handleChange = (value) => {
  console.log(value[1])
}


// 月份选择器
const month = ref(1)
const month_options = [
  {
    value: 1,
    label: '一月',
  },
  {
    value: 2,
    label: '二月',
  },
  {
    value: 3,
    label: '三月',
  },
  {
    value: 4,
    label: '四月',
  },
  {
    value: 5,
    label: '五月',
  },
  {
    value: 6,
    label: '六月',
  },
  {
    value: 7,
    label: '七月',
  },
  {
    value: 8,
    label: '八月',
  },
  {
    value: 9,
    label: '九月',
  },
  {
    value: 10,
    label: '十月',
  },
  {
    value: 11,
    label: '十一月',
  },
  {
    value: 12,
    label: '十二月',
  },
]

var tour = ref({
  title: '',
  description: '',
  bestMonthDescription: ''
})

const imageUrl = ref('')
const baseImageUrl = ref('')
// 创建一个formdata
const formData = new FormData();



onMounted(async ()=>{

const res  = await City.getCity();
console.log( res);
  // 将值赋值给哪个数据
 city_options.value = res
})


function handleFileUpload(event: Event, list: number) {
  const file = (event.target as HTMLInputElement).files[0]
  if (file) {
    const previewUrl = URL.createObjectURL(file)
    if (list === 1) {
      formData.append("file1",file)
      imageUrl.value = previewUrl
    } else {
      formData.append("file2",file)
      baseImageUrl.value = previewUrl
    }
  }
}


function submitTour() {
  // 提交逻辑
  // 获取所有的信息，如果
  // 信息不为空，就提交数据
  if (tour.value.title && tour.value.description && month.value && tour.value.bestMonthDescription && value.value[1]) {
    // 上传图片
    formData.append("title",tour.value.title)
    formData.append("city_detail",tour.value.description)
    formData.append("bast_month",month.value)
    formData.append("bast_detail",tour.value.bestMonthDescription)
    formData.append("city_id",value.value[1])
    if (localStorage.getItem("user")) {
    const user = JSON.parse(localStorage.getItem("user"));
    // 确保 user 对象包含 email 属性
        if (user && user.email) {
            formData.append("email", user.email);
        } else {
            ElMessage.error('user 对象中不存在 email 属性')
        }
    } else {
        ElMessage.error('localStorage 中不存在 "user" 项')
    }
    // 假设使用 axios 上传图片
    const tours = CityList.uploadImage(formData)
    if(tours){
      ElMessage({
        message:"旅游列表上传成功！",
        type: 'success',
      })
    }
    
  } else {
    ElMessage.error('请填写完整的旅游信息')
  }
  console.log('提交的旅游信息:', tour.value)
}
</script>

<style scoped>
.add-tour-container {
  padding: 20px;
}

.form-card {
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
}

.form-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.preview-image {
  margin-top: 10px;
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}
</style> 